<template>
  <div class="myself">
    <!-- 登录状态 -->
    <div class="head" v-if="id === null">
      <!-- 头像 -->
      <van-image
        round
        width="30px"
        height="30px"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />

      <!-- 登录信息 -->
      <div class="headtext" @click="goLogin">
        立即登录
        <van-icon name="arrow" />
      </div>

      <!-- 扫一扫 -->
      <div class="sweep">
        <img src="../assets/myself/sweep.svg" alt="" />
      </div>
    </div>

    <div class="head" v-else>
      <!-- 头像 -->
      <van-image round width="30px" height="30px" :src="userData.avatarUrl" />

      <!-- 登录信息 -->
      <div class="headtext">
        {{ userData.nickname }}
        <van-icon name="arrow" />
      </div>

      <!-- 扫一扫 -->
      <div class="sweep">
        <img src="../assets/myself/sweep.svg" alt="" />
      </div>
    </div>

    <!-- 黑胶会员 -->
    <div class="vip">
      <div class="top">
        <div class="vipname">
          开通黑胶VIP
          <div class="vipcore">会员中心</div>
        </div>

        <div class="txt">
          立享超21项专属特权
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="bottom">
        受邀专享，黑胶VIP首月仅0.88元
        <div class="bottombox">
          <div class="one">黑胶</div>
          <div class="two">0.88元</div>
        </div>
      </div>
    </div>

    <van-cell title="音乐服务" />
    <van-cell title="我的信息" icon="envelop-o" is-link />
    <van-cell title="云贝中心" icon="points" is-link />
    <van-cell title="云村有票" icon="coupon-o" is-link />
    <van-cell title="商城" icon="shopping-cart-o" is-link />
    <van-cell title="游戏专区" icon="cluster-o" is-link />
    <van-cell title="口袋彩铃" icon="phone-circle-o" is-link />
    <van-cell title="设置" icon="setting-o" is-link />

    <van-button type="primary" block @click="onOverlay">退出云音乐</van-button>

    <!-- 显示确认退出窗口 -->
    <van-overlay :show="show">
      <div class="wrapper">
        <div class="block" @click.stop>
          <div class="img">
            <img src="../assets/home/cry.svg" alt="" />
          </div>

          <!-- 取消、确认 -->
          <div class="btn">
            <div class="btnbox return" @click="show = false">点错了</div>
            <div class="btnbox out" @click="getLogout">狠心离开</div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: "Myself",

  data() {
    return {
      //是否显示确认退出窗口
      show: false,

      //用户数据
      userData: [],

      id: "",
    };
  },

  created() {
    //获取用户数据
    this.getUser();
  },

  methods: {
    goLogin() {
      this.$router.push({ name: "Login" });
    },

    //打开确认退出登录窗口
    onOverlay() {
      this.show = true;
    },

    //获取用户数据
    getUser() {
      this.id = this.$cookies.get("uid");

      this.axios({
        method: "get",
        url: "/user/detail",
        params: {
          uid: this.id,
        },
      })
        .then((res) => {
          this.userData = res.data.profile;
        })
        .catch((err) => {
          
        });
    },

    //退出登录
    getLogout() {
      //判断是否登录
      if (this.$cookies.get("uid") === null) {
        this.$toast("请先登录");
        this.show = false;
      } else {
        this.axios({
          method: "get",
          url: "/logout",
        })
          .then((res) => {
            if (res.data.code === 200) {
              //退出登录成功
              this.$toast("退出登录成功");

              //将cookie删除
              this.$cookies.remove("uid");

              this.show = false;

              setTimeout(() => {
                this.$router.go(0);
              }, 300);
            }
          })
          .catch((err) => {
            
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.myself {
  background-color: #ebebeb;
  height: 100%;
}

// 登录状态
.head {
  width: 300px;
  display: flex;
  align-items: center;
  padding: 10px 0 10px 14px;
  background-color: #fff;
}

.headtext {
  width: 140px;
  height: 30px;
  line-height: 30px;
  padding-left: 12px;
}

.sweep {
  width: 30px;
  height: 20px;
  margin-left: auto;
}

.sweep img {
  width: 20px;
  height: 20px;
}

//黑胶会员
.vip {
  width: 270px;
  padding: 10px;
  background-color: #3a3a3a;
  border-radius: 16px;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
}

.top {
  width: 100%;
  border-bottom: 1px solid #696969;
  padding-bottom: 16px;
}

.vipname {
  display: flex;
  color: #fee4de;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
}

.vipcore {
  width: 50px;
  padding: 4px 10px;
  text-align: center;
  font-size: 12px;
  color: #dabfb9;
  margin-left: auto;
  border-radius: 10px;
  border: 1px solid #dabfb9;
  transform: scale(0.7);
}

.txt {
  color: #948481;
  font-size: 12px;
  display: flex;
}

.bottom {
  color: #948481;
  font-size: 12px;
  padding-top: 6px;
  display: flex;
  align-items: center;
}

.bottombox {
  width: 40px;
  background-color: red;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  margin-left: 54px;
  transform: scale(0.6);
  text-align: center;
}

.one {
  width: 100%;
  font-size: 14px;
  font-weight: 600;
}

.two {
  width: 100%;
  text-align: center;
}

/deep/.van-button--block {
  margin: auto;
  width: 300px;
  position: relative;
  top: 40px;
}

/deep/.van-button--primary {
  color: #ec4141;
  background-color: #fff;
  border: 0.02667rem solid #fff;
}

// 确认退出登录窗口
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 200px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 10px;
}

.btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.btnbox {
  width: 90px;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  &.out {
    background-color: #454249;
  }
  &.return {
    background-color: rgb(240, 189, 96);
  }
}

.img {
  width: 100px;
  height: 100px;
  padding: 10px 10px 16px 10px;
  position: relative;
  left: 40px;
}

.img img {
  width: 100px;
  height: 100px;
}

.text {
  width: 100%;
  padding: 0 10px 16px 10px;
  text-align: center;
}
</style>